<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>同步滚动</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.roll{
				display: flex;
				justify-content: space-between;
			}
			.roll .left{
				width: 50%;
				height: 500px;
				overflow: auto;
			}
			.roll .right{
				width: 50%;
				height: 500px;
				margin-top: 200px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div class="roll">
			<div class="left">
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
			</div>
			<div class="right">
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
				<p>1</p>
			</div>
		</div>
		
		
		<script type="text/javascript">
			let l = document.querySelector('.left')
			let r = document.querySelector('.right')
			let scale = (l.scrollHeight - l.clientHeight) / (r.scrollHeight - r.clientHeight)
			let flag = true
			
			l.addEventListener('mouseover',function(){
				flag = false
				l.addEventListener('scroll',function(){
					if(!flag){
						r.scrollTop = l.scrollTop / scale
					}
				})
			})
			
			r.addEventListener('mouseover',function(){
				flag = true
				r.addEventListener('scroll',function(){
					if(flag){
						l.scrollTop = r.scrollTop * scale
					}
				})
			})
			
		</script>
	</body>
</html>
